<template>
  <div>
    <div>
      <div v-loading="imageLoading" element-loading-text="请稍等，图片上传中">
        <quill-editor
          ref="newEditor"
          v-model="text"
          :options="editorOption"
          @change="editorChange"
        >
        </quill-editor>
        <!-- 文件上传input 将它隐藏-->
        <el-upload
          style="display: none"
          :action="'/api/upload/uploadFile/12'"
          :show-file-list="false"
          :headers="header"
          :before-upload="newEditorbeforeupload"
          :on-success="newEditorSuccess"
          ref="uniqueId"
          id="uniqueId"
        >
        </el-upload>
      </div>
    </div>
    <div class="btn"></div>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.js";

export default {
  props: {
    information: {
      type: String,
    },
    content: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      btnFlag: true,
      // content: this.context,
      header: {
        "API-User-Token": JSON.parse(sessionStorage.getItem("userInfo")).token,
      },
      centerDialogVisible: false,
      text: this.content, // 编辑器的内容
      editorOption: {
        placeholder: this.information,
      },
      imageLoading: false,
      imageId: "", //成功上传的图片id
      id: "", //修改时所需要的id
      videoUploadTag: false,
      videoLink: "",
      activeName: "first",
    };
  },
  watch: {
    content(newValue) {
      this.text = newValue;
    },
  },
  components: {
    quillEditor,
  },
  mounted() {
    this.open();
  },
  methods: {
    editorChange() {
      this.handleClick();
    },
    show(txt) {
      this.$nextTick(() => {
        this.text = txt;
      });
    },
    // 点击tab切换
    videoSelectTagClick(tab, event) {
      // console.log("点击切换", tab.name);
      this.activeName = tab.name;
      if (this.activeName == "second") {
        // console.log("进入条件");
      }
    },
    // 输入链接
    addVideoLink() {
      if (this.videoLink.length == 0) {
        this.$message("请输入视频链接");
      }
      //当编辑器中没有输入文本时，这里获取到的 range 为 null
      var range = this.$refs.newEditor.quill.getSelection();
      //视频插入在富文本中的位置
      var index = 0;
      if (range == null) {
        index = 0;
      } else {
        index = range.index;
      }
      //隐藏弹框
      this.videoUploadTag = false;
      //将视频链接插入到当前的富文本当中
      this.$refs.newEditor.quill.insertEmbed(index, "video", this.videoLink);
    },
    async open() {
      var imgHandler = async function (state) {
        if (state) {
          var fileInput = document.querySelector("#uniqueId input"); //隐藏的file元素
          fileInput.click(); //触发事件
        }
      };
      var videoOpen = async (state) => {
        this.videoUploadTag = true;
      };
      this.$refs.newEditor.quill
        .getModule("toolbar")
        .addHandler("image", imgHandler);
      this.$refs.newEditor.quill
        .getModule("toolbar")
        .addHandler("video", videoOpen);
    },
    handleClick() {
      this.$emit("handleRichtextAddClick", this.text);
    },
    handleClick_() {
      this.$emit("handleRichtextAddClick", this.text);
      this.centerDialogVisible = false;
    },
    newEditorbeforeupload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      if (isJPG && isLt2M) this.imageLoading = true;
      return isJPG && isLt2M;
    },
    newEditorbeforeuploadVideo(file) {
      //暂时没做视频验证
      return true;
    },
    // 上传本地视频
    newEditorSuccessVideo(response, file, fileList) {
      this.$nextTick(() => {
        // 获取光标所在位置
        let length = this.$refs.newEditor.quill.getSelection();
        let index = 0;
        if (length == null) {
          index = 0;
        } else {
          index = length.index;
        }
        // 插入图片，res为服务器返回的图片链接地址
        this.$refs.newEditor.quill.insertEmbed(index, "video", response.data);
        // 调整光标到最后
        this.$refs.newEditor.quill.setSelection(index + 1);
        //隐藏弹框
        this.videoUploadTag = false;
      });
      this.imageId = response.data; //成功获取图片地址
      // console.log(this.imageId);

      this.imageLoading = false;
    },
    //上传图片回调
    newEditorSuccess(response, file, fileList) {
      this.$nextTick(() => {
        // 获取光标所在位置
        let length = this.$refs.newEditor.quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        this.$refs.newEditor.quill.insertEmbed(
          length,
          "image",
          response.data.fileIds
        );
        // 调整光标到最后
        this.$refs.newEditor.quill.setSelection(length + 1);
      });
      this.imageId = response.data; //成功获取图片地址
      // console.log(this.imageId);
      this.imageLoading = false;
    },
  },
};
</script>

<style scoped>
.edit_container {
  padding: 40px;
  margin-bottom: 40px;
}
.editer {
  width: 100px;
  height: 300px;
}
.submit_btn {
  /* text-align: center; */
}
.btn {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.quill-editor {
  height: 220px;
}
.quill-editor >>> .ql-editor {
  /* height: 500px; */
  height: 450px;
}
</style>

<style>
.editor {
  line-height: normal;
  height: 220px;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
#disabledMsg.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
  color: #bfd9d8;
  background-color: #eef6f6;
  border-color: #d1e5e5;
}
</style>
